<template>
	<view class="pet-home-container">
		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goShop">
									<text class="titleText">商城</text>
								</view>
								<view class="nav-item" @click="goHealth">
									<text class="titleText">健康</text>
								</view>
								<view class="nav-item" @click="goForum">
									<text class="titleText">论坛</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" v-model="searchKeyword" placeholder="搜索宠物食品" class="search-input"
									@keypress="handleSearchKeypress" />
								<button class="search-btn" @click="handleSearch">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<view class="action-item" @click="goShopCar">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="col-lg-12" style="display: flex;flex-direction: column;align-items: center;">
			<!-- 轮播图 -->
			<view class="banner-container">
				<swiper class="brand-swiper" :indicator-dots="true" :autoplay="true" :interval="3000">
					<swiper-item v-for="(banner, index) in brandBanners" :key="index">
						<image :src="banner.image" class="brand-banner" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>
			<div class="shape">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 280">
					<path fill-opacity="1">
						<animate attributeName="d" dur="20000ms" repeatCount="indefinite"
							values="M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z; M0,160L48,181.3C96,203,192,245,288,234.7C384,224,480,160,576,133.3C672,107,768,117,864,138.7C960,160,1056,192,1152,197.3C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;												 M0,64L48,74.7C96,85,192,107,288,133.3C384,160,480,192,576,170.7C672,149,768,75,864,80C960,85,1056,171,1152,181.3C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
			                                         M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;" />
					</path>
				</svg>
			</div>

			<!-- 热销推荐 -->
			<view class="content-section">
				<view class="section-header">
					<text class="section-title">{{ isSearching ? '搜索结果' : '热销推荐' }}</text>
					<text class="more-link" v-if="isSearching" @click="resetSearch">返回推荐 ></text>
					<!-- <text class="more-link" v-else>查看更多 ></text> -->
				</view>
				<view class="row product-grid">
					<view class="col-lg-3 col-md-4 col-sm-6" v-for="(product, index) in hotProducts" :key="index"
						@click="onProductDetail(product)">
						<view class="product-card">
							<image :src="product.image" class="product-image"></image>
							<view class="product-info">
								<text class="product-name">{{ product.name }}</text>
								<text class="product-price">¥{{ product.price }}</text>
								<button class="add-to-cart-btn">加入购物车</button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 促销活动 -->
			<view class="content-section">
				<view class="section-header">
					<text class="section-title">促销活动</text>
				</view>
				<view class="row">
					<view class="col-lg-6 col-md-12" v-for="(promo, index) in promotions" :key="index"
						@click="goStore(1)">
						<view class="promo-card">
							<view class="row align-items-center">
								<view class="col-md-4">
									<image :src="promo.image" mode="aspectFill" class="promo-image"></image>
								</view>
								<view class="col-md-8">
									<view class="promo-info">
										<text class="promo-title">{{ promo.title }}</text>
										<text class="promo-desc">{{ promo.description }}</text>
										<button class="promo-btn">查看详情</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 智能推荐 -->
			<view class="content-section">
				<view class="section-header">
					<text class="section-title">智能推荐</text>
					<text class="section-subtitle">根据小毛球的健康状况</text>
				</view>
				<view class="row">
					<view class="col-lg-12" v-for="(item, index) in smartRecommends" :key="index"
						@click="onProductDetail(item)">
						<view class="recommend-card">
							<view class="row align-items-center">
								<view class="col-md-3">
									<image :src="item.image" class="recommend-image"></image>
								</view>
								<view class="col-md-7">
									<view class="recommend-info">
										<text class="recommend-name">{{ item.name }}</text>
										<text class="recommend-desc">{{ item.description }}</text>
										<text class="recommend-reason">推荐理由：{{ item.reason }}</text>
									</view>
								</view>
								<view class="col-md-2 text-center">
									<text class="recommend-price">¥{{ item.price }}</text>
									<button class="recommend-btn">立即购买</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- AI问答 -->
			<view class="content-section">
				<view class="section-header">
					<text class="section-title" @click="scrollToBottom">AI问答</text>
					<text class="section-subtitle">专业宠物健康助手</text>
				</view>
				<view class="chat-widget">
					<view class="chat-container">
						<scroll-view scroll-y class="chat-messages" :scroll-top="scrollTop">
							<view v-for="(msg, index) in chatMessages" :key="index" class="chat-message"
								:class="msg.type">
								<view class="message-header">
									<image :src="msg.avatar" class="chat-avatar"></image>
									<text class="message-sender">{{ msg.type === 'ai' ? '宠物健康助手' : '我' }}</text>
								</view>
								<view class="message-content" :class="{'loading-message': msg.isLoading}">
									{{ msg.content }}
								</view>
							</view>
						</scroll-view>
						<view class="chat-input-container">
							<input type="text" v-model="chatInput" placeholder="输入您的宠物健康问题" class="chat-input"
								@keypress="handleKeypress" />
							<button class="send-button" @click="sendMessage" :disabled="isLoading">
								{{ isLoading ? '发送中...' : '发送' }}
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>


		<div class="shape-footer">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 280">
				<path fill-opacity="1">
					<animate attributeName="d" dur="20000ms" repeatCount="indefinite"
						values="M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z; M0,160L48,181.3C96,203,192,245,288,234.7C384,224,480,160,576,133.3C672,107,768,117,864,138.7C960,160,1056,192,1152,197.3C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;												 M0,64L48,74.7C96,85,192,107,288,133.3C384,160,480,192,576,170.7C672,149,768,75,864,80C960,85,1056,171,1152,181.3C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
			                                         M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,117.3C960,85,1056,75,1152,90.7C1248,107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;" />
				</path>
			</svg>
		</div>
		<!-- 页脚 -->
		<view class="footer">
			<view class="container">
				<view class="row">
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">关于我们</text>
							<text class="footer-link">公司简介</text>
							<text class="footer-link">发展历程</text>
							<text class="footer-link">联系方式</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">客户服务</text>
							<text class="footer-link">帮助中心</text>
							<text class="footer-link">售后政策</text>
							<text class="footer-link">投诉建议</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">商务合作</text>
							<text class="footer-link">商家入驻</text>
							<text class="footer-link">品牌合作</text>
							<text class="footer-link">营销中心</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">关注我们</text>
							<view class="social-links">
								<text class="social-icon iconfont icon-weixin"></text>
								<text class="social-icon iconfont icon-weibo"></text>
								<text class="social-icon iconfont icon-douyin"></text>
							</view>
							<text class="footer-contact">客服热线：400-123-4567</text>
						</view>
					</view>
				</view>
				<view class="copyright">
					<text>© 2025 宠物健康管家 All Rights Reserved</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		productApi,
		userApi
	} from '@/api/user.js'
	export default {
		data() {
			return {
				unreadMessages: 3,
				brandBanners: [{
						image: '/static/index/about1.jpg'
					},
					{
						image: '/static/index/about2.jpg'
					}, {
						image: '/static/index/about4.jpg'
					}, {
						image: '/static/index/about5.jpg'
					}
				],
				hotProducts: [],
				promotions: [{
						title: '新品上市',
						description: '全系列5折优惠',
						image: '/static/index/xinpin.jpg'
					},
					{
						title: '季末大促',
						description: '满300减50',
						image: '/static/index/jimo.jpg'
					}
				],
				smartRecommends: [{
					id: 1,
					name: '钙质营养补充粉',
					description: '专为缺钙犬只定制',
					reason: '根据健康档案推荐',
					price: 49.9,
					image: '/static/pet-test.png'
				}],
				chatMessages: [{
					type: 'ai',
					avatar: '/static/index/ai.png',
					content: '您好！我是您的宠物健康助手，有什么可以帮您的吗？'
				}],
				chatInput: '',
				scrollTop: 0,
				isLoading: false,
				typingInterval: null,
				tempAiResponse: '',
				currentDisplayText: '',
				searchKeyword: '', // 搜索关键词
				isSearching: false, // 是否正在搜索状态
				searchResults: [], // 搜索结果
				originalHotProducts: [], // 保存原始热销商品列表
				userAvatar: ''
			}
		},
		mounted() {
			// 添加滚动事件监听
			window.addEventListener('scroll', this.handleScroll);
			// 保存原始热销商品数据
			this.originalHotProducts = [...this.hotProducts];
			this.fetchProducts()
			this.getUserInfo()
		},
		beforeDestroy() {
			// 移除滚动事件监听
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			// 获取商品列表
			async fetchProducts() {
				try {
					const result = await productApi.getProductList()

					// 检查结果是否有效

					// 筛选包含"热销"标签的商品
					let hotProducts = result.filter(product => {
						const tags = product.label ? product.label.split(' ') : [];
						return tags.includes('热销');
					});
					console.log(hotProducts);
					hotProducts = hotProducts.slice(0, 4);
					// 更新热销商品列表
					if (hotProducts.length > 0) {
						this.hotProducts = hotProducts.map(item => ({
							id: item.id,
							name: item.tradeName,
							price: item.prices,
							image: item.picture || '/static/pet-test.png' // 如果没有图片则使用默认图片
						}));

						// 同时更新原始热销商品列表(用于搜索重置)
						this.originalHotProducts = [...this.hotProducts];
					}

				} catch (error) {
					uni.showToast({
						title: '获取商品失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取商品失败', error);
				}
			},
			// 搜索按钮点击处理
			handleSearch() {
				if (!this.searchKeyword.trim()) {
					// 如果搜索关键词为空，恢复原始商品显示
					this.resetSearch();
					return;
				}

				// 设置搜索状态
				this.isSearching = true;

				// 模拟搜索延迟
				uni.showLoading({
					title: '搜索中...'
				});

				setTimeout(() => {
					// 执行搜索逻辑
					this.performSearch();

					uni.hideLoading();
				}, 500); // 500ms延迟模拟搜索过程
			},

			// 执行搜索
			performSearch() {
				const keyword = this.searchKeyword.toLowerCase().trim();

				// 搜索所有可能包含商品的数组
				// 1. 热销商品
				const hotResults = this.originalHotProducts.filter(item =>
					item.name.toLowerCase().includes(keyword)
				);

				// 2. 促销活动（如果需要）
				const promoResults = this.promotions.filter(item =>
					item.title.toLowerCase().includes(keyword) ||
					item.description.toLowerCase().includes(keyword)
				);

				// 3. 智能推荐
				const recommendResults = this.smartRecommends.filter(item =>
					item.name.toLowerCase().includes(keyword) ||
					item.description.toLowerCase().includes(keyword)
				);

				// 合并搜索结果（移除重复项）
				this.searchResults = [
					...hotResults,
					...recommendResults
				];

				// 更新显示的商品为搜索结果
				this.hotProducts = this.searchResults;

				// 如果没有结果，显示提示
				if (this.searchResults.length === 0) {
					uni.showToast({
						title: '没有找到相关商品',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: `找到${this.searchResults.length}个相关商品`,
						icon: 'none'
					});

					// 滚动到热销推荐区域
					this.scrollToHotProducts();
				}
			},

			// 重置搜索，恢复原始数据展示
			resetSearch() {
				this.isSearching = false;
				this.searchKeyword = '';
				this.searchResults = [];
				this.hotProducts = [...this.originalHotProducts];
			},

			// 搜索框回车键处理
			handleSearchKeypress(event) {
				if (event.keyCode === 13) {
					this.handleSearch();
				}
			},

			// 滚动到热销商品区域
			scrollToHotProducts() {
				// 使用DOM选择器获取热销商品区域
				setTimeout(() => {
					const el = document.querySelector('.section-title:contains("热销推荐")');
					if (el) {
						el.scrollIntoView({
							behavior: 'smooth',
							block: 'start'
						});
					}
				}, 300);
			},
			onProductDetail(product) {
				window.removeEventListener('scroll', this.handleScroll);
				getApp().globalData.currentGoodId = product.id;
				// 跳转到商品详情页
				uni.navigateTo({
					url: `/pages/shop/goods?id=${product.id}`
				})
			},
			goStore() {
				window.removeEventListener('scroll', this.handleScroll);
				getApp().globalData.currentStored = 1;
				uni.navigateTo({
					url: '/pages/shop/store'
				})
			},
			goMine() {
				window.removeEventListener('scroll', this.handleScroll);
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			goShop() {
				window.removeEventListener('scroll', this.handleScroll);
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goHealth() {
				window.removeEventListener('scroll', this.handleScroll);
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			goForum() {
				window.removeEventListener('scroll', this.handleScroll);
				uni.switchTab({
					url: '/pages/forum/forum'
				})
			},
			goShopCar() {
				window.removeEventListener('scroll', this.handleScroll);
				uni.navigateTo({
					url: '/pages/shop/shopCar'
				})
			},
			// 逐字显示AI回答的函数
			typeMessage(fullText, messageIndex) {
				// 清除之前的计时器
				if (this.typingInterval) {
					clearInterval(this.typingInterval)
				}

				let i = 0
				this.chatMessages[messageIndex].content = ''

				// 确保视图先更新一次
				this.$nextTick(() => {
					// 使用setInterval逐字显示文本
					this.typingInterval = setInterval(() => {
						if (i < fullText.length) {
							// 添加一个字符
							this.chatMessages[messageIndex].content += fullText.charAt(i)
							i++
							// 保持滚动到底部
							this.scrollToBottom()
						} else {
							// 动画完成
							clearInterval(this.typingInterval)
							this.typingInterval = null
						}
					}, 40) // 每40毫秒显示一个字符
				})
			},
			// 在回复添加后调用
			scrollToBottom() {
				// 使用uni-app的页面滚动API
				uni.createSelectorQuery()
					.select('.chat-messages')
					.boundingClientRect(data => {
						if (data) {
							const query = uni.createSelectorQuery().in(this)
							query.selectAll('.chat-message').boundingClientRect(res => {
								let height = 0
								res.forEach(item => {
									height += item.height
								})
								this.scrollTop = height + 1000 // 加上额外高度确保滚动到底
							}).exec()
						}
					})
					.exec()
			},
			async getUserInfo() {
				try {
					const result = await userApi.getUserInfo()
					this.userAvatar = result.avatar
					console.log('获取用户信息成功：', this.userAvatar);
				} catch (error) {
					uni.showToast({
						title: '获取用户信息失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取用户信息失败：', error);
				}
			},
			async sendMessage() {
				if (!this.chatInput.trim() || this.isLoading) return

				// 设置加载状态
				this.isLoading = true

				// 用户消息
				this.chatMessages.push({
					type: 'user',
					avatar: this.userAvatar,
					content: this.chatInput
				})

				// 保存用户输入并清空输入框
				const userQuestion = this.chatInput
				this.chatInput = ''

				// 添加一个带加载动画的AI消息占位
				const loadingMsgIndex = this.chatMessages.length
				this.chatMessages.push({
					type: 'ai',
					avatar: '/static/index/ai.png',
					content: '思考中',
					isLoading: true,
					isAnimating: false
				})
				// 启动加载动画
				let loadingDots = 0
				const loadingAnimation = setInterval(() => {
					loadingDots = (loadingDots + 1) % 4
					this.chatMessages[loadingMsgIndex].content = '思考中' + '.'.repeat(loadingDots)
				}, 300)
				try {
					// 准备请求数据
					const requestData = {
						model: "4.0Ultra",
						messages: [{
								role: "system",
								content: "你是一个专业的宠物健康顾问，请用中文回答用户关于宠物健康、饮食、护理等方面的问题。"
							},
							{
								role: "user",
								content: userQuestion
							}
						]
					}

					// 调用讯飞星火API
					const response = await uni.request({
						url: '/api/v1/chat/completions',
						method: 'POST',
						data: requestData,
						header: {
							'Content-Type': 'application/json',
							'Authorization': 'Bearer EVLZswPnFzQiNzOkWgfy:kYipJGaozbPtsqTYNkAl'
						}
					})
					// 停止加载动画
					clearInterval(loadingAnimation)

					// 处理响应
					if (response.statusCode === 200 && response.data) {
						// 假设API返回的结构中包含回答文本
						let aiResponse = response.data.choices[0].message.content;

						// 更新消息对象
						this.$set(this.chatMessages, loadingMsgIndex, {
							type: 'ai',
							avatar: '/static/index/ai.png',
							content: '',
							isLoading: false
						})
						// 确保视图更新后再开始动画
						this.$nextTick(() => {
							this.typeMessage(aiResponse, loadingMsgIndex)
						})
					} else {
						// 添加错误信息
						const errorMsg = '抱歉，我暂时无法回答，请稍后再试。'
						this.chatMessages[loadingMsgIndex] = {
							type: 'ai',
							avatar: '/static/index/ai.png',
							content: '',
							isLoading: false,
							isAnimating: true
						}
						this.typeMessage(errorMsg, loadingMsgIndex)
					}
				} catch (error) {
					console.error('AI请求错误:', error)
					// 停止加载动画
					clearInterval(loadingAnimation)

					// 添加错误信息
					const errorMsg = '网络连接出现问题，请稍后再试。'
					this.chatMessages[loadingMsgIndex] = {
						type: 'ai',
						avatar: '/static/index/ai.png',
						content: '',
						isLoading: false,
						isAnimating: true
					}
					this.typeMessage(errorMsg, loadingMsgIndex)
				} finally {
					// 关闭加载状态
					this.isLoading = false
				}
			},
			// 可选：添加输入框回车发送功能
			handleKeypress(event) {
				if (event.keyCode === 13) {
					this.sendMessage()
				}
			},
			handleScroll() {
				// 获取滚动距离
				const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

				// 获取顶部导航栏元素
				const navbar = document.querySelector('.top-navbar');
				const titleTexts = document.querySelectorAll('.titleText');

				// 设置渐变阈值
				const threshold = 1000;

				if (scrollTop > 0) {
					// 计算透明度（0-1之间）
					const opacity = Math.min(scrollTop / threshold, 1);

					// 设置背景颜色从透明到白色的渐变
					navbar.style.backgroundColor = `rgba(255, 255, 255, ${opacity})`;

					// 设置文字颜色从白色到黑色的渐变
					const textColor = `rgba(0, 0, 0, ${opacity})`;
					const originalColor = `rgba(255, 255, 255, ${1 - opacity})`;

					// 应用于所有.titleText元素
					titleTexts.forEach(item => {
						item.style.color = textColor;
					});
				} else {
					// 重置为初始状态
					navbar.style.backgroundColor = 'transparent';
					navbar.style.boxShadow = 'none';

					// 重置所有.titleText元素
					titleTexts.forEach(item => {
						item.style.color = '#fff';
					});
				}
			}
		}
	}
</script>

<style>
	/* 引入Bootstrap样式 */
	@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css");

	/* 全局样式 */
	.pet-home-container {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		background-color: white;
		color: #212529;
		/* display: flex; */
	}

	/* 顶部导航栏 */
	.top-navbar {
		background-color: transparent;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	/* 添加过渡效果，当滚动时可以变成实色背景 */
	.top-navbar.scrolled {
		background-color: rgba(249, 203, 67, 0.9);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.logo {
		display: flex;
		align-items: center;
		flex-direction: row;
		width: 50%;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo text {
		font-size: 24px;
		/* 放大标题文字 */
		font-weight: bold;
		color: #fff;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 分类导航样式 */
	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
		/* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); */
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		/* padding: 0px 15px; */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
		/* 缩短搜索栏 */
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 0px 5px;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		/* margin-left: 10px; */
		/* cursor: pointer; */
		font-size: 14px;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #ffffff;
		font-size: 14px;
	}

	/* 轮播图 */
	.banner-container {
		width: 100%;
		position: relative;
		margin-top: 0;
		/* padding-top: 90px; */
		/* 给导航栏留出空间 */
	}

	.brand-swiper {
		height: 1200px;
		/* 增加轮播图高度 */
		width: 100%;
		overflow: hidden;
	}

	.brand-banner {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.shape path {
		fill: white;
	}

	.shape {
		position: absolute;
		bottom: 220rpx;
		left: 0;
		width: 100%;
	}

	.shape svg {
		width: 100%;
	}

	@keyframes wave-animation {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}

	/* 内容区块 */
	.content-section {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		padding: 20px;
		margin-bottom: 30px;
		width: 50%;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		border-bottom: 1px solid #f1f1f1;
		padding-bottom: 15px;
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
		position: relative;
		padding-left: 15px;
	}

	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 5px;
		height: 20px;
		width: 5px;
		background-color: #F9CB43;
		border-radius: 3px;
	}

	.section-subtitle {
		color: #6c757d;
		font-size: 14px;
		margin-left: 10px;
	}

	.more-link {
		color: #6c757d;
		font-size: 14px;
		cursor: pointer;
	}

	.more-link:hover {
		color: #F9CB43;
	}

	/* 产品网格 */
	.product-grid {
		margin-bottom: 15px;
	}

	.product-card {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		overflow: hidden;
		transition: all 0.3s;
		margin-bottom: 20px;
		cursor: pointer;
	}

	.product-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}

	.product-image {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	.product-info {
		padding: 15px;
	}

	.product-name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.product-price {
		color: #FF6B35;
		font-weight: bold;
		font-size: 18px;
		display: block;
		margin-bottom: 10px;
	}

	.add-to-cart-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 8px 15px;
		width: 100%;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s;
	}

	.add-to-cart-btn:hover {
		background-color: #e5b93e;
	}

	/* 促销卡片 */
	.promo-card {
		background-color: #f9f9f9;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 20px;
		cursor: pointer;
		transition: all 0.3s;
	}

	.promo-card:hover {
		background-color: #f1f1f1;
	}

	.promo-image {
		width: 100%;
		height: 120px;
		border-radius: 10px;
		object-fit: cover;
	}

	.promo-info {
		padding: 10px 15px;
	}

	.promo-title {
		font-size: 18px;
		font-weight: bold;
		display: block;
		margin-bottom: 10px;
	}

	.promo-desc {
		color: #6c757d;
		font-size: 14px;
		display: block;
		margin-bottom: 15px;
	}

	.promo-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 8px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	/* 推荐卡片 */
	.recommend-card {
		background-color: #f9f9f9;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 20px;
		transition: all 0.3s;
		cursor: pointer;
	}

	.recommend-card:hover {
		background-color: #f1f1f1;
	}

	.recommend-image {
		width: 100%;
		height: 150px;
		border-radius: 10px;
		object-fit: cover;
	}

	.recommend-info {
		padding: 0 15px;
	}

	.recommend-name {
		font-size: 18px;
		font-weight: bold;
		display: block;
		margin-bottom: 10px;
	}

	.recommend-desc {
		color: #6c757d;
		font-size: 14px;
		display: block;
		margin-bottom: 10px;
	}

	.recommend-reason {
		color: #F9CB43;
		font-size: 14px;
		display: block;
		margin-bottom: 10px;
	}

	.recommend-price {
		color: #FF6B35;
		font-weight: bold;
		font-size: 20px;
		display: block;
		margin-bottom: 15px;
	}

	.recommend-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 8px 15px;
		width: 100%;
		font-size: 14px;
		cursor: pointer;
	}

	/* 聊天组件 */
	.chat-widget {
		border-radius: 10px;
		overflow: hidden;
		width: 100%;
	}

	.chat-container {
		display: flex;
		flex-direction: column;
		height: 500px;
	}

	.chat-messages {
		display: flex;
		overflow-y: auto;
		padding: 20px;
		height: 100%;
		width: 100%;
		background-color: #f9f9f9;
		justify-content: center;
		align-items: center;
	}

	.chat-message {
		margin-bottom: 20px;
		max-width: 80%;
	}

	.chat-message.user {
		margin-left: auto;
	}

	.message-header {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.chat-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
		margin-left: 400rpx;
	}

	.message-sender {
		font-size: 14px;
		color: #6c757d;
	}

	.message-content {
		padding: 15px;
		border-radius: 10px;
		font-size: 16px;
		width: 50%;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	.chat-message.user .message-content {
		background-color: #F9CB43;
		color: #fff;
		margin-left: 400rpx;
	}

	.chat-message.ai .message-content {
		background-color: #fff;
		margin-left: 400rpx;
	}

	.chat-input-container {
		display: flex;
		padding: 15px;
		background-color: #fff;
		border-top: 1px solid #f1f1f1;
	}

	/* 聊天组件样式完善 */
	.chat-input {
		flex: 1;
		border: 1px solid #e0e0e0;
		border-radius: 50px;
		padding: 10px 20px;
		height: 50px;
		font-size: 16px;
		outline: none;
		margin-right: 10px;
	}

	.send-button {
		display: flex;
		align-items: center;
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 10px;
		padding: 0px 20px;
		height: 50px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s;
	}

	.send-button:hover {
		background-color: #e5b93e;
	}

	.send-button:disabled {
		background-color: #cccccc;
		cursor: not-allowed;
	}

	.loading-message {
		position: relative;
	}

	.loading-message::after {
		content: '';
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #F9CB43;
		position: absolute;
		bottom: 5px;
		right: 5px;
		animation: pulse 0.8s infinite;
	}

	@keyframes pulse {
		0% {
			opacity: 0.3;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0.3;
		}
	}

	/* 页脚样式完善 */
	.shape-footer {
		width: 100%;
	}

	.shape-footer path {
		fill: #131917;
	}

	.footer {
		background-color: #131917;
		color: #fff;
		padding: 50px 0 20px;
		/* margin-top: 50px; */
	}

	.footer-section {
		margin-bottom: 30px;
	}

	.footer-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		display: block;
		position: relative;
		padding-bottom: 10px;
	}

	.footer-title::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 50px;
		height: 2px;
		background-color: #F9CB43;
	}

	.footer-link {
		display: block;
		margin-bottom: 10px;
		color: #bbb;
		transition: all 0.3s;
		cursor: pointer;
	}

	.footer-link:hover {
		color: #F9CB43;
		padding-left: 5px;
	}

	.social-links {
		display: flex;
		margin-bottom: 15px;
	}

	.social-icon {
		font-size: 24px;
		margin-right: 20px;
		color: #bbb;
		transition: all 0.3s;
		cursor: pointer;
	}

	.social-icon:hover {
		color: #F9CB43;
		transform: scale(1.2);
	}

	.footer-contact {
		color: #bbb;
		font-size: 14px;
	}

	.copyright {
		text-align: center;
		margin-top: 30px;
		padding-top: 20px;
		border-top: 1px solid #444;
		color: #bbb;
		font-size: 14px;
	}

	/* 响应式设计优化 */
	@media (max-width: 991px) {
		.navbar-center {
			flex-direction: column;
		}

		.nav-categories {
			margin-bottom: 10px;
			margin-right: 0;
		}

		.brand-swiper {
			height: 450px;
		}
	}

	@media (max-width: 767px) {
		.top-navbar {
			background-color: rgba(249, 203, 67, 0.9);
			/* 移动端保持背景色 */
			position: relative;
		}

		.logo image {
			width: 40px;
			height: 40px;
		}

		.logo text {
			font-size: 18px;
		}

		.nav-categories {
			display: none;
			/* 在小屏幕上隐藏导航，可以考虑使用汉堡菜单替代 */
		}

		.brand-swiper {
			height: 300px;
			margin-top: 0;
		}

		.banner-container {
			padding-top: 0;
		}
	}

	/* 添加动画效果 */
	.product-card,
	.promo-card,
	.recommend-card {
		animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 美化滚动条 */
	::-webkit-scrollbar {
		width: 8px;
	}

	::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 10px;
	}

	::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 10px;
	}

	::-webkit-scrollbar-thumb:hover {
		background: #F9CB43;
	}

	/* 消息输入区域优化 */
	.chat-input:focus {
		border-color: #F9CB43;
		box-shadow: 0 0 0 2px rgba(249, 203, 67, 0.2);
	}

	/* 加载中动画 */
	.chat-message .loading-dots {
		display: inline-flex;
	}

	.chat-message .loading-dots span {
		width: 8px;
		height: 8px;
		margin: 0 2px;
		background-color: #F9CB43;
		border-radius: 50%;
		display: inline-block;
		animation: bounce 1.4s infinite ease-in-out both;
	}

	.chat-message .loading-dots span:nth-child(1) {
		animation-delay: -0.32s;
	}

	.chat-message .loading-dots span:nth-child(2) {
		animation-delay: -0.16s;
	}

	@keyframes bounce {

		0%,
		80%,
		100% {
			transform: scale(0);
		}

		40% {
			transform: scale(1);
		}
	}
</style>